<template>
	<view class="page_box">
		<u-navbar :is-back="false" title=" " v-if="0" :border-bottom="fasle"></u-navbar>

		<view class="content_box  u-skeleton">
			<view class="head bg-img ww100 h660  flex  flex-direction justify-end">
				<view class="head-top  flex padding-lr-xl">
					<image
						:src="user.avatar"
						mode="aspectFill"
						class="round  w140 h140  u-skeleton-circle"
						:class="c == 1 ? 'anni' : ''"
						type="userAvatarUrl"
						style="border-radius: 50%; overflow: hidden;"
					></image>

					<view class="flex  flex-direction ml30 justify-around ">
						<text class="f40 text-bold text-black u-skeleton-fillet">{{ user.nickname }}</text>
						<!-- <open-data class="f40 text-bold text-black" type="userNickName"></open-data> -->

						<text class="f28 text-gray u-skeleton-fillet">邀请码：{{ user.invite_code ? user.invite_code : 'DSFGA' }}</text>
					</view>
				</view>
				<view class="flex mt46 mb35">
					<view class="f-1  flex flex-direction  align-center " @click="l.to('/pages/my/myPurse')">
						<view class="flex align-center u-skeleton-fillet">
							<text class="f36 text-price text-bold"></text>
							<u-count-to :start-val="0" :end-val="user.balance ? user.balance + '' : 0" font-size="36" bold :decimals="2"></u-count-to>
						</view>

						<text class="f24 text-gray mt27 u-skeleton-fillet">我的钱包</text>
					</view>
					<view class="f-1  flex flex-direction  align-center " @click="l.to('/pages/my/pointsCtr')">
						<view class="flex align-center u-skeleton-fillet">
							<text class="f36  text-bold"></text>
							<u-count-to :start-val="0" :end-val="user.score ? user.score + '' : 0" font-size="36" :decimals="2" bold></u-count-to>
						</view>
						<text class="f24 text-gray mt27 u-skeleton-fillet">我的积分</text>
					</view>
					<!-- <view class="f-1  flex flex-direction align-end ">
						<text class="f36 text-price text-bold">56</text>
						<text class="f24 text-gray mt27">优惠券</text>
					</view> -->
				</view>
				<view class=" flex justify-center ">
					<!-- 未支付 -->
					<view class="boder bg-img w690 h160 flex justify-between u-skeleton-rect" v-if="!user">
						<view class=" flex flex-direction justify-center ml105">
							<!-- <text class="f30 " style="color: #FBEC9A;">{{ user.card_name }}超级会员</text> -->
							<text class="f30 text-bold" style="color: #FBEC9A;">成为会员</text>
							<text class="f26 mt23" style="color: #FBEC9A;">享折扣,返佣金,赠免费饮品</text>
						</view>
						<view class=" flex align-center mr60" @click.stop="l.to('/pages/my/myMbr')">
							<view class="w136 h52 flex align-center  justify-center round " style="background-color: #FBEC9A; color: #776500;">
								<text class="f24">成为会员</text>
							</view>
						</view>
					</view>
					<!-- 已支付 -->
					<view class="u-skeleton-rect" v-else>
						<view class="boder bg-img w690 h160 flex justify-between" v-if="user.is_expire">
							<view class=" flex flex-direction justify-center ml105">
								<!-- <text class="f30 " style="color: #FBEC9A;">{{ user.card_name }}超级会员</text> -->
								<text class="f30 text-bold" style="color: #FBEC9A;">成为会员</text>
								<text class="f26 mt23" style="color: #FBEC9A;">享折扣,返佣金,赠免费饮品</text>
							</view>
							<view class=" flex align-center mr60" @click.stop="l.to('/pages/my/myMbr')">
								<view class="w136 h52 flex align-center  justify-center round " style="background-color: #FBEC9A; color: #776500;">
									<text class="f24">成为会员</text>
								</view>
							</view>
						</view>
						<view class="boder bg-img w690 h160 flex justify-between" @touchend.stop="touchend" @longtap.stop="logoTime" v-else>
							<view class=" flex flex-direction justify-center ml105">
								<text class="f30 text-bold " style="color: #FBEC9A;">{{ user.card_name }}</text>

								<text class="f26 mt23" style="color: #FBEC9A;">{{ user.member_expire_time }}</text>
							</view>
							<view class=" flex align-center mr60" @click.stop="l.to('/pages/my/myMbr')">
								<view class="w136 h52 flex align-center  justify-center round " style="background-color: #FBEC9A; color: #776500;">
									<text class="f24">查看特权</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="mt38 padding-lr-lg">
				<view class="flex align-center " @click="l.to('/pages/my/activity')">
					<image src="../../static/list1.png" mode="" class="w38 h38 u-skeleton-circle"></image>
					<view class="padding-tb-lg flex justify-between solid-bottom ww100 ml18 ">
						<text class="f28 u-skeleton-fillet">活动/路演</text>
						<i class="cuIcon-right u-skeleton-fillet"></i>
					</view>
				</view>
				<!-- <view class="flex align-center " @click="l.to('/pages/my/invite?card_now_price=' + this.user.card_now_price)"> -->
				<view class="flex align-center " @click="l.to('/pages/my/invite')">
					<image src="../../static/list3.png" mode="" class="w38 h38 u-skeleton-circle"></image>
					<view class="padding-tb-lg flex justify-between solid-bottom ww100 ml18">
						<text class="f28 u-skeleton-fillet">我的邀请</text>
						<i class="cuIcon-right u-skeleton-fillet"></i>
					</view>
				</view>
				<view class="flex align-center " @click="l.to('/pages/my/modifyInfo')" v-if="showData">
					<image src="../../static/2323.png" mode="" class="w38 h38 u-skeleton-circle"></image>
					<view class="padding-tb-lg flex justify-between solid-bottom ww100 ml18">
						<text class="f28 u-skeleton-fillet">修改报名资料</text>
						<i class="cuIcon-right u-skeleton-fillet"></i>
					</view>
				</view>
				<view class="flex align-center " @click="l.to('/pages/my/setUp')">
					<image src="../../static/list2.png" mode="" class="w38 h38 u-skeleton-circle"></image>
					<view class="padding-tb-lg flex justify-between solid-bottom ww100 ml18">
						<text class="f28 u-skeleton-fillet">设置</text>
						<i class="cuIcon-right u-skeleton-fillet"></i>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <u-tabbar v-model="current" :list="tabbarList" :border-top="false" active-color="#F2736D" @change="change"></u-tabbar> -->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
		<!-- <showTips></showTips> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			info: uni.getStorageSync('userInfo'),
			user: {},

			list: [],
			c: 0,
			showData: false,
			loading: true, // 是否显示骨架屏组件
			// nickname: uni.getStorageSync('user').nickname,
			// avatar: uni.getStorageSync('user').avatar,
		};
	},
	async onShow() {
		this.personalCtr();
		this.name();

		let href = await this.getQueryStringArgs(window.location.href);
		
		let sgnIn = await this.sgnIn(href.code);
		if (sgnIn.code) {
			uni.setStorageSync('data', sgnIn.data);
			uni.setStorageSync('token', sgnIn.data.token);
			uni.setStorageSync('user', sgnIn.data.user);
			this.personalCtr();
		}
	},
	watch: {
		vuex_login(newValue, oldValue) {
			console.log('newValue: ', newValue);
			console.log('oldValue :>> ', oldValue);
			!newValue && this.personalCtr();
		},
	},

	onLoad(e) {},
	methods: {
		async touchend() {
			this.c = 0;
		},
		async logoTime() {
			uni.vibrateLong({
				success: () => {
					this.c = 1;
				},
			});
		},
		async name() {
			const res = await this.$u.post('UserInfo/extendsInfo', {}, {});

			if (res.data) {
				this.showData = true;
			}
			console.log('this.showData :>> ', this.showData);
		},
		async personalCtr() {
			let obj = {
				// uid: uni.getStorageSync("uid"),
			};
			const res = await this.$u.post('UserInfo/memberCard', obj, {});

			this.user = res.data;
			this.loading = false;
			// this.list =
		},
	},
};
</script>

<style lang="scss" scoped>
.page_box {
}
.anni {
	animation: turn 0.1s linear infinite;
}
@keyframes turn {
	0% {
		-webkit-transform: rotate(0deg);
	}
	25% {
		-webkit-transform: rotate(90deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
	}
	75% {
		-webkit-transform: rotate(270deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}
/deep/u-navbar {
	position: fixed;
	top: 0;
	transform: translateX(-50%);
	z-index: 99999;
	// background-color: transparent !important;
}
.content_box {
	.head {
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210615184150.png);
	}
	.boder {
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210616164845.png);
	}
}
</style>
